<template>
  <div id="main" class="ds-full ds-stack">
    <div class="ds-full">
      <div id="myMap" style="height: 100%"></div>
    </div>
    <div class="ds-top ds-left ds-w15 ds-vertical bj-margin1">
      <!-- 功能列表 -->
      <div class="ds-box ds-border20 ds-vertical ds-shadow1">
        <function-list @select="select"></function-list>
      </div>
      <!-- 图层显示 -->
      <div class="ds-box ds-border20 ds-vertical ds-shadow1">
        <my-vector
          @select="selectV"
          :map="myMap"
          :load="load"
          @detailsShow="detailsShow"
        ></my-vector>
      </div>
      <!-- 工具列表 -->
      <div class="ds-box ds-border20 ds-vertical ds-shadow1">
        <div style="height: 100%">
          <!-- 多点测距离 -->
          <draw-line-measure :map="myMap"></draw-line-measure>
          <!-- 新建线条 -->
          <draw-line
            :map="myMap"
            :dialog="dialogIs"
            :dialogName="dialogName"
            :pName="name"
            :classify="classify"
            :color="color"
            :width="width"
            :details="details"
            @dialogOpen="dialogOpen"
          ></draw-line>
          <!-- 新建多边形 -->
          <draw-polygon
            :map="myMap"
            :dialog="dialogIs"
            :dialogName="dialogName"
            :pName="name"
            :classify="classify"
            :color="color"
            :width="width"
            :details="details"
            @dialogOpen="dialogOpen"
          ></draw-polygon>
        </div>
      </div>
    </div>

    <!-- 多边形创建对话框 -->
    <div v-show="dialog" class="ds-center ds-top-30 ds-border20 ds-shadow1">
      <div class="ds-horizontal">
        <span class="ds-grow"></span>
        <span>{{ dialogName }}</span>
        <span class="ds-grow"></span>
      </div>
      <form class="bj-text-left">
        <div class="ds-hr3"></div>
        <div>
          <label class="ds-label">名称:</label>

          <input v-model="name" class="ds-input" type="text" />
        </div>
        <div>
          <label class="ds-label">分类:</label>
          <input v-model="classify" class="ds-input" type="text" />
        </div>

        <label class="ds-label">颜色:</label>
        <colorPicker v-model="color" />
        <label class="ds-label">宽度:</label>
        <select v-model="width">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
        </select>
        <div
          class="bj-line"
          :style="{ 'border-top': width + 'px solid ' + color }"
        ></div>
        <textarea v-model="details" class="bj-textarea" />
      </form>
      <div>
        <button
          @click="primayry"
          class="ds-button ds-button-primary"
          style="width: 50%"
        >
          创建
        </button>
        <button
          @click="dialogOpen"
          class="ds-button bj-button-close"
          style="width: 50%"
        >
          取消
        </button>
      </div>
    </div>

    <!-- 多边形修改对话框 -->
    <div v-show="editDialog" class="ds-center ds-top-30 ds-border20 ds-shadow1">
      <div class="ds-horizontal">
        <span class="ds-grow"></span>
        <span>{{ editDialogName }}</span>
        <span class="ds-grow"></span>
      </div>
      <form class="bj-text-left">
        <div class="ds-hr3"></div>
        <div>
          <label class="ds-label">名称:</label>

          <input v-model="editName" class="ds-input" type="text" />
        </div>
        <div>
          <label class="ds-label">分类:</label>
          <input v-model="editClassify" class="ds-input" type="text" />
        </div>

        <label class="ds-label">颜色:</label>
        <colorPicker v-model="editColor" />
        <label class="ds-label">宽度:</label>
        <select v-model="editWidth">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
        </select>
        <div
          class="bj-line"
          :style="{ 'border-top': width + 'px solid ' + color }"
        ></div>
        <textarea v-model="editDetails" class="bj-textarea" />
      </form>
      <div>
        <button
          @click="del()"
          class="ds-button bj-button-del"
          style="width: 32%"
        >
          删除
        </button>
        <button
          @click="editPrimayry()"
          class="ds-button bj-button-primary"
          style="width: 32%"
        >
          修改
        </button>
        <button
          @click="editDialogOpen()"
          class="ds-button bj-button-close"
          style="width: 32%"
        >
          取消
        </button>
      </div>
    </div>

    <!-- 详情对话框 -->
    <div v-show="dDialog" class="ds-center ds-top-30 ds-border20 ds-shadow1">
      <div class="ds-horizontal">
        <span class="ds-grow"></span>
        <span class="data-title">
          <span>{{ dDialogName }}</span>
        </span>
        <span class="ds-grow"></span>
      </div>
      <div class="ds-hr3"></div>
      <textarea v-model="dDetails" class="bj-textarea" disabled="disabled" />
      <div>
        <button
          @click="editDialogOpen('detail')"
          class="ds-button bj-button-primary"
          style="width: 50%"
        >
          修改
        </button>
        <button
          @click="detailsShow()"
          class="ds-button bj-button-close"
          style="width: 50%"
        >
          取消
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { colorRgba } from "../utils/color";
import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

import { transform } from "ol/proj";

import FunctionList from "./main/function-list.vue";
import MyVector from "./main/my-vector.vue";
import DrawLine from "./main/draw-line.vue";
import DrawPolygon from "./main/draw-polygon.vue";
import DrawLineMeasure from "./main/draw-line-measure.vue";
let url = "http://localhost:8080";
//let url = "http://www.mikoyang.cn";
export default {
  props: ["center", "centerTo"], //地图组件传值
  name: "Main",
  components: {
    FunctionList,
    MyVector,
    DrawLine,
    DrawPolygon,
    DrawLineMeasure,
  },
  data() {
    return {
      myMap: null,
      offlineMapLayer: null,
      load: false,
      about: false,
      view: false,
      //显示详情对话框
      dDialog: false,
      dDialogName: "",
      dDetails: "",

      //显示修改对话框
      json: {
        type: "FeatureCollection",
        features: [
          {
            properties: {
              name: "",
              classify: "",
              stroke: "",
              fill: "",
              width: "",
              details: "",
              centroid: [],
            },
            type: "Feature",
            geometry: {
              type: "MultiPolygon",
              coordinates: [],
            },
          },
        ],
      },
      editDialog: false,
      editDialogName: "",
      editName: "",
      editClassify: "",
      editColor: "",
      editWidth: "",
      editDetails: "",
      //显示新建对话框
      dialog: false,
      dialogIs: false,
      dialogName: "",
      name: "",
      classify: "",
      color: "#be1717",
      selected: "",
      width: 2,
      details: "",
    };
  },
  computed: {},
  watch: {
    centerTo() {
      this.setCenter(this.center);
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.mapInit();
    });
  },
  beforeDestroy() {},
  methods: {
    mapInit() {
      // 地图设置中心，设置到北京，在本地离线地图
      var center = transform([116.41717, 39.87456], "EPSG:4326", "EPSG:3857");
      //创建地图
      this.view = new View({
        center: center,
        projection: "EPSG:3857",

        zoom: 5,
        maxZoom: 15,
        minZoom: 0,
      });
      this.myMap = new Map({
        view: this.view,
        target: "myMap",
      });
      //2022/4/19 过时的
      //补0函数
      // function zeroFill(num, len, radix) {
      //   var str = num.toString(radix || 10);
      //   while (str.length < len) {
      //     str = "0" + str;
      //   }
      //   return str;
      // }
      let _this = this;
      //创建图层
      this.offlineMapLayer = new Tile({
        source: new XYZ({
          tileUrlFunction: function (coordinate) {
            //2022/4/19 过时的
            // var x = "C" + zeroFill(coordinate[1], 8, 16);
            // var y = "R" + zeroFill(coordinate[2], 8, 16);
            // var z = "L" + zeroFill(coordinate[0], 2, 10);
            // var daolu = url + "/daolu/" + z + "/" + y + "/" + x + ".png";
            // var bing = url + "/bing/" + z + "/" + y + "/" + x + ".png";
            // daolu;
            // bing;
            //谷歌混合
            var gghh =
              url +
              "/gghh/" +
              coordinate[0] +
              "/" +
              coordinate[1] +
              "/" +
              (2 ** coordinate[0] - coordinate[2] - 1) +
              ".jpg";
            //谷歌街道
            var ggjd =
              url +
              "/ggjd/" +
              coordinate[0] +
              "/" +
              coordinate[1] +
              "/" +
              (2 ** coordinate[0] - coordinate[2] - 1) +
              ".jpg";
            var urll = "";
            if (_this.selected == "卫星航拍图") urll = gghh;
            else if (_this.selected == "交通路线图") urll = ggjd;
            else if (_this.selected == "卫星混合图") urll = "";
            else urll = "";
            return urll;
          },
          prijection: "EPSG:3857",
        }),
      });
      //2022/4/11  用于重定向至不可加载的404.png,后来发现无需此操作
      // this.offlineMapLayer.getSource().on("tileloaderror", function (e, i) {
      //   e,i
      //    let src = e.tile.src_;
      //   console.log("加载错误了" + src);
      // });

      this.myMap.addLayer(this.offlineMapLayer);
      // console.log("加载了");
      this.load = true;

      //用于点击地图得到经纬度坐标
      this.myMap.on("singleclick", function (e) {
        var lonlat = _this.myMap.getCoordinateFromPixel(e.pixel);
        _this.$emit("select", transform(lonlat, "EPSG:3857", "EPSG:4326"));
      });
    },
    //更换地图源
    select(item) {
      this.selected = item;
      // console.log(item);
      //刷新所有图层
      if (this.myMap) this.offlineMapLayer.getSource().refresh();
      //2022/3/23   使用该方法会导致测距图层不显示,故修复
      //this.myMap.getLayers().forEach((layer) => layer.getSource().refresh());
    },

    //显示隐藏图层
    selectV(item) {
      item;
    },
    //两点测距
    ranging() {},
    //绘制多边形
    drawing() {},
    primayry() {
      this.dialog = !this.dialog;
      //用于做判断
      this.dialogIs = !this.dialogIs;

      // console.log(this.name);
      // console.log(this.classify);
      // console.log(this.color);
    },
    dialogOpen(name = this.dialogName) {
      this.dialog = !this.dialog;
      this.dialogName = name;
      this.name = "";
      this.classify = "";
      this.color = "#be1717";
      this.width = 2;
      this.details = "";
    },

    detailsShow(item = "", details = "", json = {}) {
      this.dDialog = !this.dDialog;

      this.dDialogName = item;
      this.dDetails = details;
      this.json = json;
    },
    setCenter(item) {
      //用户输入则是string
      if (typeof item == "string")
        this.view.setCenter(
          transform(item.split(",").map(Number), "EPSG:4326", "EPSG:3857")
        );
      //自动读取则是obj
      if (typeof item == "object")
        this.view.setCenter(
          transform(item.map(Number), "EPSG:4326", "EPSG:3857")
        );
    },
    editDialogOpen(item = "") {
      if (item == "detail") this.dDialog = false;
      if (!this.editDialog) {
        this.editDialog = !this.editDialog;
        //console.log(this.json);
        this.editDialogName =
          this.json.features[0].properties.classify +
          "-" +
          this.json.features[0].properties.name;
        this.editName = this.json.features[0].properties.name;
        this.editClassify = this.json.features[0].properties.classify;
        this.editColor = this.json.features[0].properties.stroke;
        this.editWidth = this.json.features[0].properties.width;
        this.editDetails = this.json.features[0].properties.details;
      } else {
        this.editDialog = !this.editDialog;
        this.editDialogName = "";
        this.editName = "";
        this.editClassify = "";
        this.editColor = "#be1717";
        this.editWidth = 2;
        this.editDetails = "";
      }
    },
    //删除多边形
    del() {
      //delete请求
      //console.log(this.editDialogName);
      this.$http
        .delete("", {
          data: {
            dataName: this.editDialogName,
            dataNewName:"",
            data: "",
          },
        })
        .then((res) => {
          res;
          //  console.log(res.data);
        })
        .catch(function (err) {
          console.log(err);
        });

      this.editDialogOpen();
    },
    //更新多边形
    editPrimayry() {
      this.json.features[0].properties.name = this.editName;
      this.json.features[0].properties.classify = this.editClassify;

      this.json.features[0].properties.width = this.editWidth;
      this.json.features[0].properties.details = this.editDetails;
      this.json.features[0].properties.stroke = colorRgba(this.editColor, 0.6);
      this.json.features[0].properties.fill = colorRgba(this.editColor, 0.3);
      //put请求
      this.$http
        .put("", {
          dataName: this.editDialogName,
          dataNewName: this.editClassify + "-" + this.editName,
          data: JSON.stringify(this.json),
        })
        .then((res) => {
          res;
          //console.log(res.data);
        })
        .catch(function (err) {
          console.log(err);
        });
      this.editDialogOpen();
    },
  },
};
</script>

<style>
#myMap > div {
  background-color: transparent !important;
}

.anchorBL {
  display: none !important;
}

.ol-zoom {
  text-align: right;
}
.ol-rotate {
  text-align: right;
}

.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}

.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.ol-tooltip-measure:before,
.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.ol-tooltip-static:before {
  border-top-color: #ffcc33;
}
.ol-rotate-reset {
  display: none;
}
</style>
